<template>
    <view class="m-score">
        <uv-rate
            v-model="curValue"
            :count="totalScore"
            :allowHalf="allowHalf"
            :readonly="readOnly"
            :activeIcon="activeIcon"
            :inactiveIcon="inactiveIcon"
            @change="onChange"
        ></uv-rate>
    </view>
</template>

<script>
/**
 * 评分控件
 * https://www.uvui.cn/components/rate.html
 */
import MForm from "../js/MForm";

export default {
    name: "MScore",
    mixins: [MForm],
    data() {
        return {
            curValue:0,
            iconTypes:{
                "icon-fillstar-collection-fill":["star","star-fill"],//五角星
                "icon-filllike_fill":["heart","heart-fill"],//爱心
                "icon-fillpraise_fill":["thumb-up","thumb-up-fill"],//赞
                "icon-fillfandui":["thumb-down","thumb-down-fill"],//反对
            }
        }
    },
    computed: {
        totalScore() {
            //总分数
            return this.metadata.options.totalScore;
        },
        allowHalf() {
            //是否半选
            return this.metadata.options.allowHalf;
        },
        inactiveIcon() {
            //未选中时图标
            let iconType = this.metadata.options.iconType;
            let icons = this.iconTypes[iconType|| "icon-fillstar-collection-fill"];
            if(!icons){
                return "";
            }
            return icons[0];
        },
        activeIcon() {
            //选中时图标
            let iconType = this.metadata.options.iconType;
            let icons = this.iconTypes[iconType || "icon-fillstar-collection-fill"];
            if(!icons){
                return "";
            }
            return icons[1];
        },
    },
    created() {
        this.initValue(this.value);
    },
    methods: {
        initValue(value) {
            if (!value) return;
            this.curValue = Number(value);
        },
        onChange(value){
            this.setData(value);
        }
    },
    watch: {
        value(val) {
            this.initValue(val);
        }
    },
}
</script>

<style scoped>
.m-score>>>.uv-icon__icon span{
    font-size: 1.5rem!important;
    color: rgba(255, 191, 67, 1) !important;
}
</style>
